<template>
  <div class="tabbar">
    <!-- <div class="back">
      <vab-icon icon="arrow-drop-left-line" class="back" />
    </div> -->
    <h1 class="nav-title">考试预览</h1>
  </div>
  <div style="" class="content-box">
    <el-row class="field">
      <el-col :span="8" class="title">公司名称：</el-col>
      <el-col :span="16" class="content">{{ examInfo?.companyName }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">考试名称：</el-col>
      <el-col :span="16" class="content">{{ examInfo?.examName }}</el-col>
    </el-row>
    <!-- <el-row class="field">
      <el-col :span="8" class="title">电话：</el-col>
      <el-col :span="16" class="content">{{ examInfo?.phone }}</el-col>
    </el-row> -->
    <!-- <el-row class="field">
      <el-col :span="8" class="title">用时：</el-col>
      <el-col :span="16" class="content">{{
        `${examTimeCost && Math.floor(examTimeCost / 60)}分钟${examTimeCost && examTimeCost % 60}秒`
      }}</el-col>
    </el-row> -->
    <!-- <el-row class="field">
      <el-col :span="8" class="title">交卷时间：</el-col>
      <el-col :span="16" class="content">{{ `${examInfo?.endTime}` }}</el-col>
    </el-row> -->
    <!-- <el-row class="field">
      <el-col :span="8" class="title">得分：</el-col>
      <el-col :span="16" class="content">{{ `${examInfo?.userScore}` }}</el-col>
    </el-row> -->
    <!-- <el-row class="field">
      <el-col :span="8" class="title">是否通过：</el-col>
      <el-col :span="16" class="content">{{
        `${examInfo?.pass === 0 ? "考试不通过" : "考试通过"}`
      }}</el-col>
    </el-row> -->
    <template v-for="questionItem of questionList">
      <el-row class="field">
        <el-col :span="8" class="question-type">{{ questionItem.type }}</el-col>
      </el-row>
      <template v-for="item of questionItem.items">
        <el-row class="field">
          <span
            style="margin-right: 20px"
            class="correct"
          >
            {{ item.question }}</span
          >
          <div>
            <span>正确答案: </span>
            <span class="right-answer">{{ `${item.answer}` }}</span>
          </div>
        </el-row>
        <el-row v-for="answerItem of item.answerList" class="field">{{
          `${answerItem.value}: ${answerItem.label}`
        }}</el-row>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import DrillExamInfoApi from "~/src/api/DrillExamInfoApi";
const props = defineProps({
  modelValue: {},
});
const questionList = ref([])
const examInfo = ref({})

onMounted(async () => {
  //初始化数据model
  const { data } = await DrillExamInfoApi.getDetail({
    drillExamInfoId: props.modelValue.query.drillExamInfoId, //从路由中获取参数
  });
  examInfo.value.companyName = data.companyName
  examInfo.value.examName = data.examName
  console.log("data",data)
  for (const item of data.dataList) {
    if (["单选题", "多选题", "判断题"].includes(item.subjectType)) {
      const target = questionList.value.find(
        (x) => x.type === item.subjectType
      );
      // 遍历获取题目选项
      const optionsList = [];
      for (const key of Object.keys(item)) {
        if (key !== "" && key.includes("option") && item[key] !== "") {
          const optionValue = key.split("option")[1];
          const optionLabel = item[key];
          optionsList.push({
            value: optionValue,
            label: optionLabel,
          });
        }
      }
      if (!target) {
        questionList.value.push({
          type: item.subjectType,
          items: [
            {
              question: item.subjectContent,
              userAnswer: item.userOptions,
              answer: item.answer,
              answerList: optionsList,
            },
          ],
        });
      } else {
        target.items.push({
          question: item.subjectContent,
          userAnswer: item.userOptions,
          answer: item.answer,
          answerList: optionsList,
        });
      }
    }
  }
});
</script>

<style scoped>
.tabbar {
  display: flex;
  background-color: white;
  height: 60px;
  align-items: center;
}
.back {
  font-size: 35px;
}
.nav-title {
  font-size: 18px;
  margin: 0 auto;
  /* transform: translateX(-15px); */
}
.field {
  line-height: 30px;
  margin: 15px;
  border-bottom: 1px solid #dbdbdb;
  vertical-align: middle;
}
.title {
  font-size: 14px;
}
.content {
  font-size: 17px;
}
.question-type {
  font-size: 17px;
  color: var(--el-color-warning);
}
.content-box {
  overflow: scroll;
  /* height: calc(100% - 60px); */
  height: 600px;
}
.user-answer {
  margin-right: 10px;
  color: var(--el-color-primary);
}
.right-answer {
  color: var(--el-color-success);
}
.correct {
  color: var(--el-color-primary);
  font-size: 15px;
}
.incorrect {
  color: var(--el-color-danger);
  font-size: 15px;
}
</style>
